package myJs.cps.myTable

import myJs.cps.{PureSelectCp, PureTextareaCp, Style}
import myJs.myPkg.i18n.ReactI18next
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.web.html._

import scala.collection.immutable.SeqMap
import scala.scalajs.js

/**
 * Created by yz on 21/1/2022
 */
@react object TextSearchLiCp {

  case class Props(searchType: String, searchTypeChange: String => Unit, text: String, textChange: String => Unit)

  val component = FunctionalComponent[Props] { props =>

    val js.Tuple3(t, i18n, _) = ReactI18next.useTranslation()

    li(className := "myLi myInputLi",
      div(style := Style(marginBottom = 10),
        span(className := "fa fa-filter"),
        s" ${t("screening")}"
      ),
      div(style := Style(marginBottom = "5px"), className := "form-group",
        div(className := "col-sm-12",
          PureSelectCp(name = "searchType",
            optionMap = SeqMap("like" -> t("fuzzy"), "equals" -> t("accurate")),
            value = props.searchType, onChange = props.searchTypeChange)
        )
      ),
      div(className := "form-group",
        div(className := "col-sm-12",
          PureTextareaCp(placeHolder = s"${t("screeningPlaceholder")}",
            value = props.text, onChange = props.textChange)
        )
      )
    )

  }

}
